<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的桌面</title>
    <?php include_once 'public/views/h_header_css.php'; ?>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!-- <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script> -->

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <!-- <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script> -->

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <style>
        @media screen and (max-width: 1200px) {
            html{
                font-size: 12px;
            }
        }
        @media screen and (min-width: 1201px) and (max-width: 1600px) {
            html{
                font-size: 14px;
            }
        }
        @media screen and (min-width: 1601px) {
            html{
                font-size: 16px;
            }
        }
        /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */


        *{
            margin: 0;
            padding: 0;
        }
        .p30{
            padding: 1.875rem;
            background-color: #F7F7F7;
            min-width: 1000px;
            min-height: 100vh;
            box-sizing: border-box;
        }
        .bg{
            background-color: #ffffff;
            border-radius: 0.625rem;
            padding:0.9375rem;
            box-sizing: border-box;
            margin-bottom: 1.25rem;
        }
        .title{
            font-family: Source Han Sans CN;
            font-weight: 550;
            font-size: 1rem;
            color: #0D5BB2;
            margin-bottom: 0.9375rem;
            /*content: "";*/
            /*display: table;*/
            /*clear: both;*/
        }
        .title .icon{
            width: auto;
            height: 1.6875rem;
            vertical-align: middle;
        }
        select{
            background: #F4F4F4;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 0.8125rem;
            color: #908F8F;
            width: 6.25rem;
            border: 0;
            padding: 0.3125rem;
        }
        select:focus{
            border: 0;
            outline: none;
        }
        .title select{
            float: right;
        }
        .flex-between{
            display: flex;
            justify-content: space-between;
        }
        .item{
            width: 32%;
            padding: 0.9375rem;
            /*background-color: red;*/
            background-image: url("public/img/tab1.png");
            background-size: 100% 100%;
        }
        .item:nth-child(2){
            background-image: url("public/img/tab2.png");
        }
        .item:nth-child(3){
            background-image: url("public/img/tab3.png");
        }
        .bookmark{
            width: 1.0625rem;
            height: 0.8125rem;
        }
        .item-title{
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 1.0625rem;
            color: #FFFFFF;
        }
        .item-number{
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 1.5625rem;
            color: #FFFFFF;
        }
        .item-number span {
            display: inline-block;
            width: 6rem;
        }
        .books{
            width: 1.5625rem;
            height: 1.5625rem;
            vertical-align: middle;
        }
        #chart {
            width: 100%;
            height: 15rem;
            margin-top: 1.25rem;
        }
        #chart2 {
            width: 100%;
            height: 18.75rem;
        }
        .show{
            width: 25rem;
            height: 18.75rem;
            margin-right: 0.875rem;
            /*position: relative;*/
        }
        .show img{
            background-color: rebeccapurple;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }
        .show .carousel,.show .carousel-inner,.show .carousel-item{
            height: 100%;
        }
        .show .carousel-inner .activeTitle{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            /*height: 70px;*/
            /*line-height: 70px;*/
            padding: 1.25rem 1.75rem;
            box-sizing: border-box;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 1rem;
            color: #FFFFFF;
            background-color: rgba(76, 76, 76, 0.5);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .listContainer{
            width: 24.875rem;
        }
        .list{
            width: 100%;
            border-top: 1px solid #DDDDDD;
            flex: 1;
        }
        .list li{
            display: flex;
            justify-content: space-between;
            line-height: 2.8125rem;
            font-weight: 500;
            font-size: 0.9375rem;
            color: #666666;
            border-bottom: 1px solid #DDDDDD;
            padding: 0 0.3125rem 0 0.75rem;
            position: relative;
            cursor: pointer;
        }
        .list li:before {
            content: "";
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            background-color: #4C4C4C;
            border-radius: 50%;
            top: 50%;
            position: absolute;
            left: -1px;
            transform: translateY(-50%);
        }
        .list li .articleTitle{
            display: inline-block;
            font-family: Source Han Sans CN;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list li .time{
            display: inline-block;
            width: 5.625rem;
            font-family: Source Han Sans CN;
            opacity: 0.6;
            margin-left: 1rem;
            font-size: 0.9375rem;
        }
        .rightContainer .listBg{
            border-top: none;
        }
        .rightContainer .listBg li{
            border-bottom: none;
            background-color: #ECEDF1;
            border-radius: 12px;
            line-height: 2.5rem;
            margin-bottom: 0.625rem;
        }

    </style>
    <script src="public/js/echarts.min.js" ></script>
</head>
<body>
<div class="p30">
    <div class="flex-between" style="height: 28.75rem;">
        <div class="bg" style="width: 46%">
            <div class="title">
                <span>学校监控评价数据情况</span>
                <img src="public/img/icon2.png" class="icon"/>
                <select id="school_year" onchange="getNumber()">
                   <?php foreach ($yearlist as $k => $v): ?>
                    <option><?php echo $v ?></option>
                    <?php endforeach ?>
                </select>
            </div>
            <div class="numberContainer flex-between">
                <div class="item">
                    <div class="item-title">
                        <img src="public/img/bookmark.png" alt="" class="bookmark">
                        <span>校级督导听课次数</span>
                    </div>
                    <div class="item-number">
                        <span id="school_num"></span>
                        <img src="public/img/books.png" alt="" class="books">
                    </div>
                </div>
                <div class="item">
                    <div class="item-title">
                        <img src="public/img/bookmark.png" alt="" class="bookmark">
                        <span>二级督导听课次数</span>
                    </div>
                    <div class="item-number">
                        <span id="unit_num"></span>
                        <img src="public/img/books.png" alt="" class="books">
                    </div>
                </div>
                <div class="item">
                    <div class="item-title">
                        <img src="public/img/bookmark.png" alt="" class="bookmark">
                        <span>其他监控人员听课次数</span>
                    </div>
                    <div class="item-number">
                        <span id="other_num"></span>
                        <img src="public/img/books.png" alt="" class="books">
                    </div>
                </div>
            </div>
            <div id="chart"></div>
        </div>
        <div class="bg" style="width: 30%">
            <div class="title">
                <span>二级学院监控评价数据情况</span>
                <img src="public/img/icon2.png" class="icon"/>
            </div>
            <div class="flex-between" style="justify-content: flex-end;margin: 0 auto 20px">
               
                <input type="text" id="course_units" readonly onchange="getUnitNumber()" value="<?php echo $course_units[0] ?>" style="color:#666666;flex: 1;text-align: right;border:0px;background-color: #fff;">
                <!-- <select id="course_units"  onchange="getUnitNumber()" style="width: 300px; -webkit-appearance: none;   -moz-appearance: none;  
  -ms-appearance: none;  appearance: none;          background: white;      border: 1px solid #ccc;  padding: 5px;    position: relative;      ">
                    <?php foreach ($course_units as $k => $v): ?>
                    <option><?php echo $v ?></option>
                    <?php endforeach ?>
                </select> -->
                <select id="unit_year" onchange="getUnitNumber()" style="margin-left: 10px;" >
                     <?php foreach ($yearlist as $k => $v): ?>
                    <option><?php echo $v ?></option>
                    <?php endforeach ?>
                </select>
            </div>
            <div id="chart2"></div>
        </div>
        <div class="bg" style="width: 22%">
            <div class="title">
                <span>公告通知</span>
                <img src="public/img/icon1.png" class="icon"/>

                <a href="Admin/IndexLarge/imagelist?type=1"  target="_blank" style="text-decoration: none;float: right;color: gray;">查看更多</a>

<!--                <input type="text" id="course_units" readonly onchange="getUnitNumber()" value="--><?php //echo $course_units[0] ?><!--" style="color:#666666;flex: 1;text-align: right;border:0px;background-color: #fff;">-->
            </div>
            <ul class="list listBg">
             <?php foreach ($ImgText['ggtz'] as $k => $v): ?>
                <li onclick="goDetail(<?php echo $v['id'] ?>,<?php echo $v['type'] ?>)">
                    <span class="articleTitle"><?php echo $v['title'] ?></span>
                    <span class="time"><?php echo $v['createdStr'] ?></span>
                </li>
                <?php endforeach ?>
            </ul>
        </div>
    </div>
    <div class="flex-between" style="height: 25rem;">
        <div class="bg" style="width: 46%">
            <div class="title">
                <span>工作动态</span>
                <img src="public/img/icon1.png" class="icon"/>
                <a href="Admin/IndexLarge/imagelist?type=2"  target="_blank" style="text-decoration: none;float: right;color: gray;">查看更多</a>
            </div>
            <div class="flex-between">
                <div class="show" style="width: 48%">
                    <div id="demo" class="carousel slide" data-ride="carousel">
                        <!-- 轮播图片 -->
                        <div class="carousel-inner">
                        <?php foreach ($ImgText['gzdt_img'] as $k => $v): ?>
                                <?php if($k == 0): ?>
                                    <div class="carousel-item active" onclick="goDetail(<?php echo $v['id'] ?>,<?php echo $v['type'] ?>)">
                                        <img src="<?php echo $v['image_url'] ?>">
                                        <div class="activeTitle"><?php echo $v['title'] ?></div>
                                    </div>
                                <?php else: ?>
                                    <div class="carousel-item" onclick="goDetail(<?php echo $v['id'] ?>,<?php echo $v['type'] ?>)">
                                        <img src="<?php echo $v['image_url'] ?>">
                                        <div class="activeTitle"><?php echo $v['title'] ?></div>
                                    </div>
                                <?php endif; ?>
                        <?php endforeach ?>
                       
                        </div>
                        <!-- 左右切换按钮 -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>
                    </div>
                </div>
                <div class="listContainer" style="width: 50%">
                    <ul class="list">
                        <?php foreach ($ImgText['gzdt'] as $k => $v): ?>
                            <li onclick="goDetail(<?php echo $v['id'] ?>,<?php echo $v['type'] ?>)">
                                <span class="articleTitle"><?php echo $v['title'] ?></span>
                            <span class="time"><?php echo $v['createdStr'] ?></span>
                            </li>
                        <?php endforeach ?>
                    </ul>
                </div>

            </div>
        </div>
        <div class="bg" style="width: 30%">
            <div class="title">
                <span>制度文件</span>
                <img src="public/img/icon3.png" class="icon"/>
                <a href="Admin/IndexLarge/imagelist?type=3"  target="_blank" style="text-decoration: none;float: right;color: gray;">查看更多</a>
            </div>
            <ul class="list">
               <?php foreach ($ImgText['zdwj'] as $k => $v): ?>
                        <li onclick="getToPdf(this)" data-url="<?php echo base_url() ?><?php echo $v['file_url'] ?>">
                                <span class="articleTitle"><?php echo $v['title'] ?></span>
                                <span class="time"><?php echo $v['createdStr'] ?></span>
                        </li>
                <?php endforeach ?>
            </ul>
        </div>
        <div class="bg" style="width: 22%">
            <div class="title">
                <span>质量研究和质量文化</span>
                <img src="public/img/icon3.png" class="icon"/>
                <a href="Admin/IndexLarge/imagelist?type=4" target="_blank" style="text-decoration: none;float: right;color: gray;">查看更多</a>
            </div>
            <ul class="list">
              <?php foreach ($ImgText['zljb'] as $k => $v): ?>
                    <li onclick="getToPdf(this)" data-url="<?php echo base_url() ?><?php echo $v['file_url'] ?>">
                        <span class="articleTitle"><?php echo $v['title'] ?></span>
                        <span class="time"><?php echo $v['createdStr'] ?></span>
                    </li>
                <?php endforeach ?>
            </ul>
        </div>
         <input id="home_pop_status" type="hidden" value="<?php echo $home_pop_status; ?>">
         <input id="home_user_id" type="hidden" value="<?php echo $home_user_id; ?>">
    </div>
</div>
<!-- <textarea style="display: none;" id="classes_number" cols="30" rows="10" ><?php echo $classes_number ?></textarea> -->
<!-- <textarea style="display: none;" id="title" cols="30" rows="10" ><?php echo $title ?></textarea>
<textarea style="display: none;" id="number" cols="30" rows="10" ><?php echo $number ?></textarea> -->
<textarea style="display: none;" id="course_units_json" cols="30" rows="10" ><?php echo $course_units_json ?></textarea> 

<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>

// 使用示例



function showModal(url, width, height) {
  // 创建背景遮罩
  var overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.top = 0;
  overlay.style.left = 0;
  overlay.style.right = 0;
  overlay.style.bottom = 0;
  overlay.style.background = 'rgba(0, 0, 0, 0.7)';
  
  // 创建弹窗
  var modal = document.createElement('div');
  modal.style.position = 'absolute';
  modal.style.backgroundColor = 'white';
  modal.style.width = width + 'px';
  modal.style.height = height + 'px';
  modal.style.left = '50%';
  modal.style.top = '30%';
  modal.style.transform = 'translate(-50%, -50%)';
  
  // 创建iframe
  var iframe = document.createElement('iframe');
  iframe.style.border = 'none';
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  iframe.src = url;
  
  // 添加iframe到弹窗
  modal.appendChild(iframe);
  
  // 添加弹窗和遮罩到body
  document.body.appendChild(overlay);
  document.body.appendChild(modal);
  
  // 关闭按钮
  var closeButton = document.createElement('button');
  closeButton.innerHTML = '关闭';
  closeButton.onclick = function() {
    overlay.parentNode.removeChild(overlay);
    modal.parentNode.removeChild(modal);
  };
  modal.appendChild(closeButton);
}
 

    function goInfoList(id,type) {
        console.log(id)
        window.open("Admin/HomeLarge/detail/"+id+"/"+type);
    }
    function goDetail(id,type) {
        console.log(id)
        window.open("Admin/HomeLarge/detail/"+id+"/"+type);
    }

    function getToPdf(obj){
        var url = $(obj).attr("data-url");
        window.open(url);
    }
     var chart2 = echarts.init(document.getElementById('chart2'));
     var chart = echarts.init(document.getElementById('chart'));

    function getUnitNumber(){
         var year = $("#unit_year").val();
         var course_units = $("#course_units").val();
         $.ajax({
            type: "post",
            url: "Admin/HomeLarge/getSecondaryNum",
            data:{year:year,course_units:course_units},
            async: true,
            success: function(data) {
                var ret = $.parseJSON(data);
                if(ret.code == 0) {
                    // var chart2 = echarts.init(document.getElementById('chart2'));
                    var options2 = {
                        grid: {
                            left: '3%',
                            right: '8%',
                            bottom: 0,
                            top: 10,
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: 'axis',
                        },
                        xAxis: {
                            type: 'value',
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: 'rgba(77, 128, 254, 0.2)',
                                    type: 'line',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(77, 128, 254, 0.2)',
                                },
                            },
                            axisLabel: {
                                //  改变x轴字体颜色和大小
                                show: false,
                                textStyle: {
                                    color: '#000000',
                                    fontSize: 12,
                                },
                            },
                        },
                        yAxis: [
                            {
                                type: 'category',
                                inverse: true,
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#666666',
                                        fontSize: 12,
                                    },
                                },
                                splitLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: true,
                                    lineStyle: {
                                        color: 'rgba(77, 128, 254, 0.2)',
                                    },
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: 'rgba(77, 128, 254, 0.2)',
                                    },
                                },
                                data: ret.data.datatitle,
                            },
                        ],
                        series: [
                            {
                                // name: '道路指数',
                                type: 'bar',
                                zlevel: 1,
                                label: {
                                    show: true,
                                    position: 'right', // 位置
                                    color: '#00c0fa',
                                    fontSize: 12,
                                    distance: 10 // 距离
                                    // formatter: '{c}%' // 这里是数据展示的时候显示的数据
                                }, // 柱子上方的数值
                                itemStyle: {
                                    normal: {
                                        borderRadius: [0, 30, 30, 0],
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            {
                                                offset: 0,
                                                color: '#24A9FF',
                                            },
                                            {
                                                offset: 1,
                                                color: '#7AD3F0',
                                            },
                                        ]),
                                    },
                                },
                                barWidth: 20,
                                data: ret.data.datalist,
                            },
                        ],
                    };
                    chart2.setOption(options2);
                    // window.onresize = function() {
                    //     // 让图表的宽高自适应容器
                    //     chart2.resize();
                    // };
                    // console.log(ret.data.datatitle)
                    // console.log(ret.data.datalist)
                } else {
                    window.parent.topMessagePrompt('error',ret.msg);
                }
            }
        });


    }

     function getNumber(){
        var year = $("#school_year").val();
        $.ajax({
            type: "post",
            url: "Admin/HomeLarge/getTotalNum",
            data:{year:year},
            async: true,
            success: function(data) {
                var ret = $.parseJSON(data);
                if(ret.code == 0) {
                    $("#school_num").text(ret.data.school_num);
                    $("#unit_num").text(ret.data.unit_num);
                    $("#other_num").text(ret.data.other_num);

                    // 配置选项
                var options = {
                    backgroundColor: '#ffffff',
                    grid: {
                        left: '3%',
                        right: '5%',
                        top: '20%',
                        bottom: '0%',
                        containLabel: true,
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
                    },
                    title: {
                        text: "专项听课次数",
                        left: "left",
                        textStyle: {
                            fontSize: 12,
                            color: "#666666",
                        },
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                color: '#666666',
                                interval: 0,
                                fontSize: 12,
                                // rotate:30,
                                formatter:function(value){  
                                    var str = ""; 
                                    var num = 4; //每行显示字数 
                                    var valLength = value.length; //该项x轴字数  
                                    var rowNum = Math.ceil(valLength / num); // 行数  
                                    
                                    if(rowNum > 1) {
                                        for(var i = 0; i < rowNum; i++) {
                                            var temp = "";
                                            var start = i * num;
                                            var end = start + num;
                                            
                                            temp = value.substring(start, end) + "\n";
                                            str += temp; 
                                        }
                                        return str;
                                    } else {
                                        return value;
                                    } 
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#9a9a9a',
                                    interval: 2,
                                    
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f4f4f4',
                                },
                            },
                            data: ret.data.title,
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: 300,
                            axisLabel: {
                                formatter: '{value}',
                                textStyle: {
                                    color: '#666666',
                                },
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#dfdfdf',
                                },

                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#f4f4f4',
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            // name: '已采纳',
                            type: 'line',
                            // stack: '总量',
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                normal: {
                                    color: '#6EC71E',
                                    lineStyle: {
                                        color: '#6EC71E',
                                        width: 1,
                                    },
                                    areaStyle: {
                                        color: '#C1FF8A'
                                    }
                                },
                            },
                            markPoint: {
                                itemStyle: {
                                    normal: {
                                        color: 'red',
                                    },
                                },
                            },
                            data: ret.data.number,
                        }
                    ],
                };


                // 使用配置项显示图表
                chart.setOption(options);

                    // console.log(ret);
                    // window.parent.topMessagePrompt('success',ret.msg);
                    // window.parent.refreshTable();
                } else {
                    window.parent.topMessagePrompt('error',ret.msg);
                }
            }
        });
     }


     function getTime(){
        var i = 1;
        var course_units_json =  $.parseJSON($("#course_units_json").val());
            // console.log( course_units_json);
        setInterval(function() {
            $("#course_units").val(course_units_json[i]);
            i += 1;
            if(i == course_units_json.length){
                i = 0;
            }
            getUnitNumber();
                console.log('Hello, World!');
            }, 10000);
     }

 

    window.onload=function(){

        var home_pop_status  =$('#home_pop_status').val();
        var home_user_id  =$('#home_user_id').val();
        // var home_pop_status  =-1
        // console.log(1234431);
        getNumber();
        getTime();
        getUnitNumber();
        if(home_pop_status == 1) {
            if(home_user_id != '' ){
                showModal('http://mdd.zjipc.cn:8097/zjipc_supervision/Admin/index/desktop?user_id='+home_user_id, 600, 400);
            } else {
                showModal('http://mdd.zjipc.cn:8097/zjipc_supervision/Admin/index/desktop', 600, 400);
            }
           
        }
        
        // 定义数据
        // var data = [
        //     { year: '2015', value: 100 },
        //     { year: '2016', value: 200 },
        //     { year: '2017', value: 150 },
        //     { year: '2018', value: 300 },
        //     { year: '2019', value: 250 },
        //     { year: '2020', value: 400 }
        // ];
        // var data = $.parseJSON($("#classes_number").val());  
    // var title = $.parseJSON($("#title").val());  
    // var number = $.parseJSON($("#number").val());  

        // 初始化echarts实例
        // var chart = echarts.init(document.getElementById('chart'));

        

        // 监听窗口resize事件
       

      
    }
    window.onresize = function() {
            // 让图表的宽高自适应容器
            chart.resize();
            chart2.resize();
    };





</script>
</body>
</html>
